<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: grey;
            margin: 50px;

        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    var box = document.querySelector(".box");

    // 传统绑定事件方式
    // 1.   DOM一级事件  Element.onclick
    // 优点: 采用赋值式的的写法,给指定元素绑定事件
    // 缺点: 只能给一个元素绑定一个相同类型的事件

    // 清除绑定的DOM一级事件   element.onclick = null

    // box.onclick = function () {
    //     alert(1111);
    // }
    // box.onclick = function () {
    //     alert(2222);
    // }
    // box.onclick = null;

    // 2. DOM二级事件 (事件监听)
    // a. 添加事件监听
    // ele.addEventListener(type,callback,bool);
    // ele       绑定事件的元素
    // type      需要绑定事件的类型 (click,dblclick,mousedown,keydown)
    // callback  事件触发时执行的回调函数(提前决定好要执行的内容 => 事件触发执行)
    // bool      是否在捕获阶段触发事件(默认:false)

    // 优点: 可以给一个元素绑定多个相同类型的事件

    // 注意: 事件监听中,this->指向绑定事件的元素

    // b. 删除事件监听
    // ele.removeEventListener(type,callback,bool);
    // 注意: 需要对应回调函数的引用清除



    box.addEventListener("click", alertMsg);

    box.addEventListener("click", clickHandler);

    function alertMsg() {
        alert(1111);
    }
    function clickHandler() {
        this.style.backgroundColor = randColor();
    }

    // -------------------------------------------------

    box.removeEventListener("click", alertMsg);

    box.removeEventListener("click", clickHandler);























    function randColor() {
        // return `rgba(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},1)`;

        var colorStr = "0123456789abcdef";  // 16 

        var str = "#";
        for (var i = 0; i < 6; i++) {
            // var index = Math.round(Math.random() * (colorStr.length - 1));
            var index = Math.floor(Math.random() * colorStr.length);
            var char = colorStr.charAt(index);
            str += char;
        }
        console.log(str);
        return str;
    }





</script>

</html>